import { useState } from 'react'
import { View } from '@tarojs/components'
import { AtInput, AtTabs, AtTabsPane } from 'taro-ui'
import Taro, { useLoad, useReachBottom } from '@tarojs/taro'
import NavBar from '@/components/nav-bar/navBar'
import TopView from '@/components/top-view/index'
import TabView from './components/tabView'
import './index.less'
import Phone1 from "@/assets/phone1.jpeg";
import Phone2 from "@/assets/phone2.jpeg";

export default function Index() {
    useLoad(() => {
        console.log('Page loaded.')
    })
    const [value, setValue] = useState<string>('');
    const [current, setCurrent] = useState(0);
    const handleClick = (index: number) => {
        setCurrent(index);
    }
    const [phoneList, setPhoneList] = useState([
        {
            imageUrl: Phone1,
            title: '手机',
            price: 8888
        },
        {
            imageUrl: Phone2,
            title: '手机',
            price: 8888
        },
        {
            imageUrl: Phone1,
            title: '手机',
            price: 8888
        },
        {
            imageUrl: Phone2,
            title: '手机',
            price: 8888
        }
    ])
    useReachBottom(() => {
        console.log('触底了');
        if (phoneList.length > 100) {
            console.log('没有更多了');
            return 
        }
        setPhoneList(phoneList.concat(phoneList))
    })
    const [tabList] = useState([
        { title: '标签页1', id: '1' },
        { title: '标签页2', id: '2' },
        { title: '标签页3', id: '3' },
        { title: '标签页4', id: '4' },
        { title: '标签页5', id: '5' },
        { title: '标签页6', id: '6' }
    ]);
    return (
        <TopView>
            <View className='index'>
                <NavBar back={false} renderLeft={<AtInput name='value' className='navBarSearch' onFocus={() => { Taro.navigateTo({ url: '/pages/search/index' }) }} placeholder='搜索' border={false} value={value} onChange={(val: string) => { setValue(val) }}  ></AtInput>} />
            </View>
            <AtTabs
                current={current}
                scroll
                tabList={tabList}
                onClick={handleClick}>
                {
                    tabList.map((tab, index) => {
                        return <>
                            <AtTabsPane current={current} index={index} >
                                <TabView phoneList={phoneList} tab={tab} />
                            </AtTabsPane>
                        </>
                    })
                }
            </AtTabs>
        </TopView>
    )
}
